<template>
  <el-card class="cart-item" v-if="cart && cart.user_id === loginPerson.id">
    <div class="cart-header">
      <h3 class="cart-title">{{ userName }} 的购物车</h3>
    </div>
    <div class="cart-info">
      <ul>
        <li
          v-for="(product, index) in cart.product_list"
          :key="index"
          class="product-item"
        >
          <el-image :src="product.img" class="product-image" fit="cover" lazy>
            <div slot="placeholder" class="image-placeholder">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <div class="product-details">
            <span class="product-name">{{ product.product_name }}</span>
            <div class="product-quantity-price">
              <span class="product-price">单价: {{ product.price }} 元</span>
              <span class="product-quantity"
                >数量:
                <el-input-number
                  v-model="product.number"
                  :min="1"
                  @change="updateQuantity(product)"
                  size="mini"
                  style="width: 80px"
                ></el-input-number>
              </span>
              <span class="product-total-price"
                >总价: {{ product.price * product.number }} 元</span
              >
            </div>
          </div>
        </li>
      </ul>
      <div v-if="cart.product_list.length">
        <p class="total-price">总价: {{ totalPrice }} 元</p>
        <el-button type="primary" @click="checkout">结算</el-button>
      </div>
      <div v-else>
        <h3>购物车为空</h3>
      </div>
    </div>
  </el-card>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "CartItem",
  props: {
    cart: {
      type: Object,
      required: true,
    },
    userName: {
      type: String,
      required: true,
    },
  },
  computed: {
    loginPerson() {
      return (
        this.$store.state.loginPerson ||
        JSON.parse(localStorage.getItem("loginPerson"))
      );
    },
    totalPrice() {
      return this.cart.product_list.reduce(
        (total, item) => total + item.price * item.number,
        0
      );
    },
  },
  methods: {
    checkout() {
      this.$router.push("/checkout");
      // console.log(this.cart);
    },
    ...mapActions("shoppingCart", ["updateCartItem"]),
    updateQuantity(product) {
      this.updateCartItem({
        userId: this.loginPerson.id,
        productId: product.product_id,
        quantity: product.number,
      });
    },
  },
};
</script>

<style scoped>
.cart-item {
  width: 60vw;
  margin: 10px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 20px;
  background-color: #f9f9f9;
}

.cart-header {
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 10px;
}

.cart-title {
  font-size: 20px;
  color: #333;
}

.cart-info {
  font-size: 16px;
  color: #555;
}

.cart-info ul {
  list-style-type: none;
  padding: 0;
}

.product-item {
  display: flex;
  align-items: center;
  margin: 15px 0;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fff;
}

.product-image {
  width: 80px;
  height: 80px;
  margin-right: 15px;
}

.product-details {
  flex-grow: 1;
}

.product-name {
  font-weight: bold;
  font-size: 18px;
}

.product-quantity-price {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.product-quantity,
.product-price {
  color: #777;
}

.total-price {
  font-weight: bold;
  color: #e74c3c;
  margin-top: 15px;
  font-size: 18px;
}
</style>
